<template>
  <view class="footer safe-area-inset-bottom">
    <view class="footerBox">
      <view class="inp" @click="openPop">
        <i class="iconfont icon-bianji"></i>
        <view class="text">{{ $t("videoGoods.detail.footerText") }}</view>
      </view>

      <view class="icons">
        <view class="iconsItem" @click="changeStatus('trans_count', '3')">
          <i class="iconfont icon-resonserate"></i>
          <view class="num">{{ data.trans_count }}</view>
        </view>

        <view
          class="iconsItem"
          @click="changeStatus('is_like', '1', 'like_count')"
        >
          <i class="iconfont icon-good" v-if="data.is_like === 0"></i>
          <i class="iconfont icon-good-fill" v-else></i>
          <view class="num">{{ data.like_count }}</view>
        </view>

        <view class="iconsItem" @click="openPop">
          <i class="iconfont icon-comments"></i>
          <view class="num">{{ data.comment_count }}</view>
        </view>

        <view
          class="iconsItem"
          @click="changeStatus('is_collect', '2', 'collect_count')"
        >
          <i class="iconfont icon-collection" v-if="data.is_collect === 0"></i>
          <i class="iconfont icon-collection-fill" v-else></i>
          <view class="num">{{ data.collect_count }}</view>
        </view>
      </view>
    </view>

    <u-popup
      mode="bottom"
      v-model="showPopup"
      :z-index="121"
      safe-area-inset-bottom
    >
      <view class="popBox">
        <input
          v-model="content"
          ref="value"
          :placeholder="getPlaceholder"
          :focus="focus"
          @confirm="confirm"
        />

        <view class="btn" @click="confirm">提交</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return null;
      },
    },

    placeholder: {
      type: String,
      default: "",
    },
  },

  watch: {
    showPopup(e) {
      if (!e) {
        this.focus = false;
      }
    },
  },

  data() {
    return {
      showPopup: false,
      content: "",
      focus: false,
    };
  },

  computed: {
    getPlaceholder() {
      return (
        this.placeholder || this.$t("videoGoods.detail.commentPlaceholder")
      );
    },
  },

  methods: {
    confirm() {
      this.$emit("confirm", this.content);
    },

    openPop() {
      this.showPopup = true;

      setTimeout(() => {
        this.focus = true;
      }, 300);

      this.$emit("setParentId", 0);
    },

    changeStatus(type, status, numEl) {
      this.$emit("changeStatus", type, status, numEl);
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  position: fixed;
  bottom: 0%;
  left: 0;
  z-index: 6;
  width: 100%;
  border-top: 1px solid #f2f2f2;
  background: #fff;
}

.footerBox {
  display: flex;
  align-items: center;
  padding: 16rpx 40rpx;

  .inp {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-right: 30rpx;
    padding: 0 26rpx;
    height: 64rpx;
    border-radius: 32px;
    background: #f2f2f2;
    font-size: 24rpx;
    color: #8c8c8c;

    .iconfont {
      margin-right: 10rpx;
    }
  }

  .icons {
    display: flex;
    align-items: center;

    .iconsItem {
      flex: 1;
      overflow: hidden;
      text-align: center;
      width: 80rpx;
    }

    .iconfont {
      font-size: 50rpx;
      color: #000;

      &.icon-good-fill {
        color: #f0250e;
      }

      &.icon-collection-fill {
        color: #fbb954;
      }
    }

    .num {
      font-size: 20rpx;
      color: #8c8c8c;
    }
  }
}

.popBox {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;

  input {
    flex:1;
    padding: 0 20rpx;
    height: 60rpx;
    background: #f2f2f2;
    border-radius: 32px 0 0 32px;
    font-size: 24rpx;
  }

  .btn{
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: #f0250e;
    border-radius: 0 32px 32px 0;
    font-size: 28rpx;
    color:#fff;
    text-align: center;
  }
}
</style>
